<template>
  <div v-loading="loading" class="business-role">
    <div class="left">
      <div class="search-container">
        <div class="left-title flexRBC">
          <div>全部标签</div>
          <el-button type="text" size="small" icon="el-icon-plus" @click="handleAddTag">新增</el-button>
        </div>
        <el-input v-model="tagSearchValue" placeholder="请输入名称搜索" size="small" />
      </div>
      <div v-if="filterTagList.length===0" class="empty-tips">无标签</div>
      <div v-if="filterTagList.length>0" ref="leftMenu" class="left-menu">
        <el-scrollbar ref="" style="height:100%" class="hid-scrollbar-x">
          <div v-for="item in filterTagList" :key="item" @click="handleCheckTag(item)">
            <div
              :class="[item===activeTag?'active':'']"
              class="tag-item flexRBC"
            >
              <span class="app-line-two">{{ item }}</span>
              <div class="btn-group">
                <i
                  :class="[item===activeTag?'active':'']"
                  class="el-icon-delete app-text-color-danger"
                  @click.stop="handleDelTag(item)"
                />
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <div class="right app-main-content-box">
      <div v-if="!tagList.length" class="empty-tips">请先新增标签</div>
      <div v-else>
        <div class="flexRBC" style="margin-bottom: 20px">
          <div class="title">
            【{{ this.activeTag }}】标记的门店：
          </div>
          <div>
            <el-button
              type="primary"
              size="medium"
              round
              @click="handleOpenDialogShopListTree"
            >标记门店
            </el-button>
          </div>
        </div>

        <div class="right-content">
          <el-table
            :data="tagShopList"
            border
            stripe
            size="small"
            empty-text="暂无被标记门店"
          >
            <el-table-column
              prop="name"
              label="门店"
            />
            <el-table-column
              prop="serial"
              label="编号"
            />
            <el-table-column
              label="管理"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="handleDelShopTag(scope.row)"
                >移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
    </div>

    <DialogShopListTree ref="dialogShopListTree" title="请选择标记门店" @emitShopIds="emitShopIds" />
    <DialogTag ref="dialogTag" />
  </div>

</template>

<script>
import DialogTag from './components/DialogTag'
import { removeTag, tagsList, tagShopList, addShopTag, removeShopTag } from '@/api/tag'

export default {
  components: {
    DialogTag
  },
  props: {
    tabName: {
      type: String,
      require: true,
      default: null
    }
  },
  data() {
    return {
      // 配置
      // roleTypeActiveIndex: "0",
      roleActiveIndex: '0',
      scope: 2,
      total: 0,
      // 状态
      loading: false,
      // 数据
      activeTag: null,
      tagSearchValue: null,
      tagList: [],
      filterTagList: [],
      tagShopList: []
    }
  },
  watch: {
    tagSearchValue(newValue) {
      this.filterTagList = this.tagList.filter(value => String(value).indexOf(newValue) !== -1)
    },
    activeTag(newValue) {
      this.tagShopList = []
      if (newValue) {
        this.fetchTagShopList()
      } else if (this.tagList.length) {
        this.activeTag = this.tagList[0]
      }
    },
    tabName(val) {
      if (val === 'tag') {
        this.fetchData()
      }
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 获取数据
     */
    // 获取tags
    fetchData() {
      this.fetchTagList()
    },

    // 获取标签列表
    fetchTagList() {
      new Promise((resolve) => {
        tagsList().then(res => {
          this.filterTagList = this.tagList = res.data || []
          if (!this.activeTag && this.tagList.length) {
            this.activeTag = this.tagList[0]
          }
        }).finally(() => {
          resolve()
        })
      })
    },

    // 获取门店列表
    fetchTagShopList() {
      new Promise((resolve) => {
        const data = {
          tags: [this.activeTag]
        }
        tagShopList(data).then(res => {
          this.tagShopList = res.data || []
        }).finally(() => {
          resolve()
        })
      })
    },

    /**
     * 按钮组
     */
    // 选择标签
    handleCheckTag(tag, index) {
      this.activeTag = tag
    },

    // 新增tag
    handleAddTag() {
      this.$refs.dialogTag.open().then(() => {
        this.fetchData()
      })
    },

    // 删除tag
    handleDelTag(tag) {
      this.$confirm(
        `您确定删除标签：${tag}?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          roundButton: true
        }
      ).then(() => {
        this.loading = true
        removeTag({ name: tag }).then(res => {
          if (tag === this.activeTag) this.activeTag = null
          this.fetchData()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {

      })
    },

    // 打开门店tree
    handleOpenDialogShopListTree() {
      const shopIds = this.tagShopList.map(v => {
        return v.id
      })
      this.$refs.dialogShopListTree.open(shopIds, true)
    },

    // 选择门店
    emitShopIds(ids) {
      if (ids && ids.length) {
        this.saveShopTag(ids)
      } else {
        this.$refs.dialogShopListTree.hide()
      }
    },

    // 标记门店
    saveShopTag(shopIds) {
      this.loading = true
      const data = {
        shopIds: shopIds,
        tag: this.activeTag
      }
      addShopTag(data).then(() => {
        this.fetchTagShopList()
        this.$refs.dialogShopListTree.hide()
        this.$notify({
          title: '成功',
          message: '标记门店成功',
          type: 'success',
          duration: 2000,
          offset: 40
        })
      }).finally(() => {
        this.loading = false
      })
    },

    // 删除门店标签
    handleDelShopTag(row) {
      // this.$confirm(
      //   `您确定移除门店【${row.name}】的标签：【${this.activeTag}】?`,
      //   '提示',
      //   {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning',
      //     center: true,
      //     roundButton: true
      //   }
      // ).then(() => {
      const data = {
        shopId: row.id,
        tag: this.activeTag
      }
      this.loading = true
      removeShopTag(data).then(res => {
        this.fetchTagShopList()
        this.$notify({
          title: '成功',
          message: '移除成功',
          type: 'success',
          duration: 2000,
          offset: 40
        })
      }).finally(() => {
        this.loading = false
      })
      // }).catch(() => {})
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.business-role {
  overflow: hidden;
  max-height: calc(100vh - 80px);

}

.left {
  overflow: hidden;
  float: left;
  width: 180px;
  height: 100%;
  margin-right: 10px;
  border-radius: 5px;
  background-color: #fff;

  .search-container {
    height: 90px;
    padding: 0 10px;

    .el-input {
      min-width: 160px;
    }
  }

  &-title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e7e7e7;
    font-size: 20px;
    font-weight: bold;
  }

  &-menu {
    height: calc(100vh - 130px);
  }

  .tag-item {
    position: relative;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    font-size: 14px;

    .btn-group {
      visibility: hidden;
      margin-left: 10px;
    }
  }

  .tag-item.active {
    color: #fff;
    background-color: #4d82f3;

    .btn-group {
      visibility: visible;
    }
  }

}

.right {
  overflow: hidden;

  .title {
    font-size: 18px;
    font-weight: bold;
  }
}

/*empty*/
.empty-tips {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 12px;
  color: #606266;
}
</style>
